@extends('base')
@section("style")
    <style type="text/css">
        #ports ul li{margin: 0 5px; font-family: 'Segoepr';font-size: 0.8em;font-weight: 600;}
        #ports ul li:first-child{ width: 70%; }
        #ports ul li img{ width:8px;height: 8px;margin:0 4px; }
    </style>
@endsection

@section('content')
    <ul class="footprint">
        <li><a href="#">{{trans('base.HOME')}}</a></li>
        <li><a href="#">&gt;&gt;</a></li>
        <li><a href="#">{{trans('base.CONTACT US')}}</a></li>
    </ul>
    <div class="contant mttop">
        <div class="fl">
            <h2 class="title yin_font2">{{trans('base.CONTACT US')}}</h2>
            <div class="left_nav">
                <ul class="pic_list">
                    <li id="contact1"><a href="javascript:void(0);" class="pic_list_ative">{{trans('base.Contact Us')}}</a></li>
                    <li id="contact2"><a href="javascript:void(0);">{{trans('base.Message Box')}}</a></li>
                </ul>
            </div>
        </div>
        <div class="contact_right">
            <div name="contact1" class="cont_us">
                <div class="cs_logo">
                    <img  @if($lang == 'en')  src="{{asset('/images/cs_logo.png')}}" @else  src="{{asset('/images/cs_logo3.png')}}"  @endif   ></div>
                <ul>
                    <li><span>{{trans('base.Address')}} : </span>{{trans('base.Room C801,Zijin Pioneer Park, 859 West Shixiang RD. Hangzhou')}}
                    </li>
                    <li><span>{{trans('base.Tel')}} :</span> 0086-571-87755818/86625528/89710053</li>
                    <li><span>{{trans('base.Fax')}} :</span> 0086-571-87755816 </li>
                    <li><span>{{trans('base.P.O.')}} :</span> 310030</li>
                    <li><span>{{trans('base.E-mail')}} : </span>lihe@lihehz.com</li>
                    <li><span>{{trans('base.Web')}} :</span> Http://www.lihehz.com</li>
                </ul>
                <div id="contact2" class="map_box">
                    <div class="bj"><a href="javascript:void(0);">&bull;{{trans('base.Beijing')}}</a></div>
                    <div class="sh"><a href="javascript:void(0);">&bull;{{trans('base.Shanghai')}}</a></div>
                    <div class="hz"><a href="javascript:void(0);" style="color: #ff0000;"><img src="{{asset("/images/star02.png")}}" style="display:inline;">{{trans('base.Hangzhou')}}</a></div>
                    <div class="gz"><a href="javascript:void(0);">&bull;{{trans('base.Guangzhou')}}</a></div>
                    <!--<span><a href="#">Beijing</a></span>
                    <span><a href="#">Shanghai</a></span>
                    <span><a href="#">Hangzhou</a></span>
                    <span><a href="#">Guangzhou</a></span>-->
                    <div id="popuphangzhou" style="width: 230px;height: 227px;top:117px;right: 78px;display: none;" >
                        <img style="width: 230px;height: 227px;margin: 0px auto;" src="{{asset('/images/01.png')}}">
                    </div>
                    <div id="ports" style="width: 230px;height: 227px;top:225px;right: 38px;display: none">
                        <ul>
                            <li>{{trans('base.There are two ports available for freight:')}}</li>
                            <li style=" color:#ff6601;"><img src="{{asset("/images/star02.png")}}" style=" height:12px; width:12px;">{{trans('base.Shanghai port')}}</li>
                            <li style=" color:#ff6601;"><img src="{{asset("/images/star02.png")}}" style=" height:12px; width:12px;">{{trans('base.Ningbo port')}}</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div name="contact2" class="message" style="margin-top: 90px;">
                <h2 class="message_tit">{{trans('base.Message Box')}}</h2>
                <p class="message_p">{{trans('base.If you have any enquiry about our products and our services, fill in the form below and contact us as soon as possible, and we will give you a prompt reply.')}}</p>
                <table class="mestable yin_font_bold">
                    <tr style="height: 20px;"></tr>
                    <tr>
                        <td class="tdl">{{trans('base.Name of company')}}：</td>
                        <td><input type="text" class="in_255" name="company" id="company"><span class="mark">*</span></td>
                    </tr>
                    <tr>
                        <td class="tdl">{{trans('base.Name')}}：</td>
                        <td><input type="text" class="in_255" name="name" id="name"><span class="mark">*</span></td>
                    </tr>
                    <tr>
                        <td class="tdl">{{trans('base.Tel')}}：</td>
                        <td><input type="text" class="in_255" name="tel" id="tel"><span class="mark">*</span></td>
                    </tr>
                    <tr>
                        <td class="tdl">{{trans('base.E-mail1')}}：</td>
                        <td><input type="text" class="in_255" name="email" id="email"><span class="mark">*</span></td>
                    </tr>
                    <tr>
                        <td class="tdl">{{trans('base.Subject')}}：</td>
                        <td><input type="text" class="in_255" name="subject" id="subject"></td>
                    </tr>
                    <tr>
                        <td class="tdl">{{trans('base.Content')}}：</td>
                        <td>
                            <textarea class="in_355" name="content" id="content"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td class="tdl"></td>
                        <td>
                            <input type="hidden" name="_token" value="{{ csrf_token() }}" />
                            <input type="button" id="submit" value="{{trans('base.Submit')}}" class="btnsub btn yin_font">
                            <input type="reset" id="reset" value="{{trans('base.Reset')}}" class="btnres btn yin_font">
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
@stop
@section('js')
    <script type="text/javascript" src="{{asset('/js/validate.js')}}"></script>
    <script type="text/javascript" language="JavaScript">
        var parameterId = {{$id}};
        if(parseInt(parameterId)>0){
            $("html,body").animate({scrollTop:($("div[name=contact"+parameterId+"]").offset().top)},800);
        }
        $("li[id^=contact]").on("click",function(){
            var id = $(this).attr("id");
            if(id){
                $("html,body").animate({scrollTop:($("div[name="+id+"]").offset().top)},800);
            }
        });
        $("#submit").on("click", function(){
            {{--if('' == $('#company').val()){--}}
                {{--alert("{{trans('base.please input company name')}}");--}}
                {{--return;--}}
            {{--}--}}
            {{--if($('#company').val().length>20){--}}
                {{--alert("{{trans('company name is too lang')}}");--}}
                {{--return;--}}
            {{--}--}}
            {{--if('' == $('#name').val()){--}}
                {{--alert("{{trans('base.please input name')}}");--}}
                {{--return;--}}
            {{--}--}}
            {{--if($('#name').val().length>10){--}}
                {{--alert("{{trans('company name is too lang')}}");--}}
                {{--return;--}}
            {{--}--}}
            {{--if('' == $('#tel').val()){--}}
                {{--alert("{{trans('base.please input tel')}}");--}}
                {{--return;--}}
            {{--}--}}
            {{--if(!isTelephone(  $('#tel').val()) ){--}}
                {{--alert("{{trans('your tel is wrong')}}");--}}
                {{--return;--}}
            {{--}--}}
            {{--if('' == $('#email').val()){--}}
                {{--alert("{{trans('base.please input email')}}");--}}
                {{--return;--}}
            {{--}--}}
            {{--if(!is_email(  $('#email').val()) ){--}}
                {{--alert("{{trans('your email is wrong')}}");--}}
                {{--return;--}}
            {{--}--}}
            {{--if($("#subject").val().length>20){--}}
                {{--alert("{{trans('subject is too long')}}");--}}
                {{--return;--}}
            {{--}--}}
            {{--if($("#content").val().length>100){--}}
                {{--alert("{{trans('content is too long')}}");--}}
                {{--return;--}}
            {{--}--}}

            var postdata = {
                company : $('#company').val(),
                name : $('#name').val(),
                tel : $('#tel').val(),
                email : $('#email').val(),
                subject : $("#subject").val(),
                content : $("#content").val(),
            };
            $.ajax({
                headers: {'X-CSRF-TOKEN': $("input[name=_token]").val()},
                type: "POST",
                url: "{{url('/message')}}",
                data: postdata,
            }).done(function (res) {

                alert(res.message);

            }).fail(function(){

            });
        });

        $("#reset").on("click", function(){
            $('input[type=text],textarea').val('');
        });

    </script>

    <script type="text/javascript" language="JavaScript">
        $(function(){
            $("div.hz").on("click", function(){
                $("#popuphangzhou,#ports").slideToggle(200);
            });
        })
        //header的高度
        var headerHeight = $('header').height();
        //content的上边距
        var contentTop = parseInt( $('div.contant').css('margin-top').match(/(-?\d*)\.?\d+/)[0] );
        $(window).scroll(function(){
            //文档滚动条的垂直位置
            var offset = $(document).scrollTop();
            //窗口滚动条的垂直位置
            var scrollTop = $(this).scrollTop();
            var scrollHeight = $(document).height();
            var windowHeight = $(this).height();
            var contentHeight = $('div.contact_right').height();

            if(offset >= (headerHeight+contentTop) && offset < (headerHeight+contentTop+contentHeight-300) ){
                $(".fl").css({"padding-top":(offset-headerHeight-contentTop) + 'px'});
            }
        });
    </script>
@endsection